<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>.::IFConnect::.</title>
        <link rel="stylesheet" type="text/css" href="styles/index.css" media="all"/>
    </h:head>

    <h:body>
        <p:growl />
        <div id="estrutura">
            <div id="cabecalho">
                <div id="cabecalho-conteudo">
                    <img alt="logo" name="logo" id="logo"  src="images/logo.png"/>
                    <div id="login">
                        <h:form>
                            <table>
                                <tr>
                                    <td>Email</td>
                                    <td>Senha</td>
                                </tr>
                                <tr>
                                    <td>
                                        <h:inputText id="email" value="#{usuariologin.email}" styleClass="campo" />
                                    </td>
                                    <td>
                                        <h:inputSecret id="senha" value="#{usuariologin.senha}" styleClass="campo" />
                                    </td>
                                    <td>
                                        <h:commandButton action="#{usuariologin.login()}" value="Entrar"  />
                                    </td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td>Esqueceu a senha?</td>
                                </tr>
                            </table>

                        </h:form>
                    </div>
                </div>
            </div>
            <div id="conteudo">

                <div id="descricao">
                    <h1>IF Connect</h1>
                    <p>
                        A IF Connect é uma rede social acadêmica disponibilizada para 
                        alunos e professores, inicialmente, do Instituto Federal de Ciência, Educação e Tecnologia
                        da Paraíba - IFPB, Campus Cajazeiras, com o intuito de proporcionar aos
                        seus usuários um meio de compartilhamento de informações, encurtando, assim, a distância
                        entre ambas as partes e tornando a comunicação mais efetiva.
                    </p>
                    <h2>Destaques</h2>
                    <table>
                        <tr>
                            <td><img alt="Comunicacao" name="comunicacao" src="images/comunicacao.png" /></td>
                            <td>
                                O IF Connect aproxima todos os membros da rede social em grupos, tais como,
                                Campi, Cursos e Turmas, e permite o compartilhamento de informações (mensagens e eventos)
                                entre eles.
                            </td>
                        </tr>
                        <tr>
                            <td><img alt="Arquivos" name="arquivos" src="images/comp-arquivos.png" /></td>
                            <td>
                                Matérias utilizados em sala de aula ou extra sala são muito importantes na efetivação do aprendizado, 
                                e estes devem ser disponibilizados aos demais interessados. 
                                O IF Connect proporciona ao usuário um ambiente para a postagem de arquivos.
                            </td>
                        </tr>
                    </table>


                </div>

                <div id="cadastro">
                    <div id="titulo">
                        <h2>Cadastre-se!</h2>
                        Você vai gostar...
                    </div>
                    <div id="logo-cadastro">

                    </div>
                    <div id="formulario">
                            <table id="form-cadastro">
                                <h:form>

                                <tr>
                                    <td> <h:outputLabel  value="Nome:" for="nome"/> </td>
                                    <td> <h:inputText id="nome" label="Nome" value="#{usuariocadastro.user.nome}" required="true" styleClass="campo" /> </td>
                                </tr>
                                <tr>
                                    <td> <h:outputLabel value="Sobrenome:" for="sobrenome"/> </td>
                                    <td> <h:inputText id="sobrenome" label="Sobrenome" value="#{usuariocadastro.user.sobrenome}" required="true" styleClass="campo"/> </td>
                                </tr>
                                <tr>
                                    <td> <h:outputLabel value="Email:" for="email"/> </td>
                                    <td> <h:inputText id="email" label="Email" value="#{usuariocadastro.user.email}" required="true" styleClass="campo" /> </td>
                                </tr>
                                <tr>
                                    <td> <h:outputLabel value="Matricula:" for="matricula" /> </td>
                                    <td> <h:inputText id="matricula" label="Matricula" value="#{usuariocadastro.user.matricula}" styleClass="campo" /> </td>
                                </tr>
                                    
                                <tr>
                                    <td> <h:outputLabel value="Sexo: " for="sexo" /> </td>
                                    <td> <h:selectOneMenu id="sexo" value="#{usuariocadastro.user.sexo}" styleClass="menu-selecao">
                                        <f:selectItem itemLabel="Masculino" itemValue="M"/>
                                        <f:selectItem itemLabel="Feminino" itemValue="F" />
                                    </h:selectOneMenu>
                                    </td>
                                </tr>

                                <tr>
                                    <td> <h:outputLabel value="Aniversário:" for="calendario" /> </td>
                                    <td> <p:calendar id="calendario" locale="pt" navigator="true" value="#{usuariocadastro.user.dataNascimento}" /> </td>
                                </tr>
                                    
                                <tr>
                                    <td> <h:outputLabel value="Tipo de Conta: " for="tipoconta" /> </td>
                                    <td> <h:selectOneMenu id="tipoconta" value="#{usuariocadastro.user.tipo}" styleClass="menu-selecao">
                                        <f:selectItem itemLabel="Aluno" itemValue="AL"/>
                                        <f:selectItem itemLabel="Professor" itemValue="PF" />
                                    </h:selectOneMenu>
                                    </td>
                                </tr>
                                    
                                <tr>
                                    <td> <h:outputLabel value="Senha:" for="senha" /> </td>
                                    <td> <h:inputSecret id="senha" label="Senha" value="#{usuariocadastro.senha1}" required="true" styleClass="campo" /> </td>
                                </tr>
                                <tr>
                                    <td> <h:outputLabel value="Confirm a Senha:" for="confirmaSenha" /> </td>
                                    <td> <h:inputSecret id="confirmaSenha" label="Confirmação de senha" value="#{usuariocadastro.senha2}" required="true" styleClass="campo" /> </td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td class="entrada">
                                        <h:commandButton styleClass="botao" value="Enviar" action="#{usuariocadastro.addUsuario()}"/>
                                    </td>
                                </tr>
                                    </h:form>
                            </table>

                    </div>
                </div>

            </div>

        </div>

        <div id="rodape-estrutura">
            <div id="rodape">
                <table id="tabela-rodape">
                    <tr>
                        <td>
                            <div id="ifpb">

                                <table>
                                    <tr>
                                        <td><img alt="IFPB" name="ifpb" src="images/logo-ifpb.png" /></td>
                                        <td>IFPB<br />Instituto Federal de Educação, Ciência e Tecnologia da Paraíba - Campus Cajazeiras, localizado em Cajazeiras a mas 15 anos ...</td>
                                    </tr>
                                </table>

                            </div>
                        </td>
                        <td>
                            <div id="fjn">

                                <table>
                                    <tr>
                                        <td><img alt="FJN" name="fjn" src="images/logo-fjn-dig.png" /></td>
                                        <td>FJN<br />Faculdade Juazeiro do Norte está localizada no Vale do Cariri, situada na cidade mais próspera do interior do Ceará...</td>
                                    </tr>
                                </table>

                            </div>
                        </td>
                        <td>
                            <div id="cajasoft">
                                <table>
                                    <tr>
                                        <td rowspan="3"><img alt="CAJASOFT" name="cajasoft" src="images/logo-cajasoft-menor.png" /></td>
                                        <td>Facebook</td>
                                        <td><img alt="face" name="face" src="images/logo-facebook-menor.png" /></td>
                                    </tr>
                                    <tr>
                                        <td>Twitter</td>
                                        <td><img alt="twitter" name="twitter" src="images/twitter_logo-menor.png" /></td>
                                    </tr>
                                    <tr>
                                        <td>Google+</td>
                                        <td><img alt="googleplus" name="googleplus" src="images/logo-googleplus-menor.png" /></td>
                                    </tr>
                                </table>
                            </div>
                        </td>
                    </tr>
                </table>

            </div>


        </div>

    </h:body>
    
</html>

